<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title th:text="${systemName}">登录</title>
    <link rel="icon" type="image/x-icon" href="https://static.platform.jwzhu.com/image/icon.ico">

    <link rel="stylesheet" href="https://static.platform.jwzhu.com/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/common.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/form.css">
    <style type="text/css">
        .login-content {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            background: url(https://static.platform.jwzhu.com/image/login_background.png) no-repeat;
            background-size: cover;
        }

        .login-window {
            margin: auto auto auto 20%;
            width: 20rem;
        }

        .login-box {
            margin: auto 20% auto auto;
            width: 20rem;
        }

        .login-box-top {
            text-align: center;
        }

        .login-box-body {
            margin-top: 1rem;
            padding: 0 1.5rem;
        }

        .login-box-bottom {
            margin-top: 1.5rem;
            text-align: right;
            padding: 0 2.5rem 0 2rem;
        }

        .login-box-bottom button{
            width: 100%;
            letter-spacing: 2rem;
            text-indent: 2rem;
        }

        .footer{
            bottom: 0;
            position: fixed;
            text-align: center;
            width: 100%;
            font-size: 0.5rem;
        }

        .footer a {
             text-decoration: unset;
             color: #000000;
         }
    </style>
</head>
<body>
<div class="login-content">
    <img src="https://static.platform.jwzhu.com/image/login_window.png" class="login-window" alt="" />
    <div class="login-box">
        <div class="login-box-top">
            <h2 th:text="${systemName}">统一管理平台</h2>
        </div>
        <div class="login-box-body">
            <form id="form_login" class="form">
                <div class="form-row">
                    <div class="form-input-group input-x">
                        <input type="text" class="form-input" name="username" placeholder="用户名"/>
                    </div>
                </div>
                <div class="form-row margin-top-1">
                    <div class="form-input-group input-x">
                        <input id="form_login_password" type="password" class="form-input" name="password" placeholder="密码"/>
                    </div>
                </div>
            </form>
        </div>
        <div class="login-box-bottom">
            <button type="button" class="button-x" onclick="login()">登录</button>
        </div>
    </div>
    <div class="footer">
        ©2019
        <a href="http://www.beian.miit.gov.cn">备案号粤ICP备18131041号</a>
    </div>
</div>
</body>
<script src="https://static.platform.jwzhu.com/js/request.js"></script>
<script src="https://static.platform.jwzhu.com/js/form.js"></script>
<script src="https://static.platform.jwzhu.com/js/common.js"></script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById('form_login_password').keyDownEnter(login);
    };

    let login = function () {
        let data = document.getElementById('form_login').getForm();

        Request.post({
            url: '/login/login',
            params: data,
            showMessage: false,
            success: data => {
                console.info('callback');
                sessionStorage.setItem('resourceUrls', data);
            }
        });
    };
</script>
</html>